<template>
    <div>
        <table class="table">
            <tbody class="table">
                <tr>
                    <td>房号编号</td>
                    <td>
                        <input type="text" v-model="can.num">
                    </td>
                </tr>
                <tr>
                    <td>名称</td>
                    <td>
                        <input type="text" v-model="can.name">
                        <input type="button" value="查询" @click="tiao">
                        <input type="button" value="添加" @click="add">
                        <a href="https://localhost:7233/api/House/UpdownExcel">导出列表</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table">
            <thead class="table">
                <tr>
                    <td>房号编号</td>
                    <td>房号名称</td>
                    <td>地址</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody class="table">
                <tr v-for="a in data">
                    <td>{{a.houseNum}}</td>
                    <td>{{ a.houseName }}</td>
                    <td>{{a.address}}</td>
                    <td>
                        <input type="button" value="移除" @click="del(a.hid)">
                        <input type="button" value="修改" @click="upd(a.hid)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="skip(1)">
        <input type="button" value="上页" @click="skip(2)">
        <input type="button" value="下页" @click="skip(3)">
        <input type="button" value="尾页" @click="skip(4)">
        一共{{can.totalpage}}页，每页{{can.pagesize}}条，一共{{can.listcount}}条，当前{{can.pageindex}}页
        <select v-model="can.pagesize" @change="tiao">
            <option :value="2">2</option>
            <option :value="3">3</option>
            <option :value="4">4</option>
        </select>
        <input type="text" v-model="can.pageindex">
        <input type="button" value="跳转" @click="page">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';

onMounted(() => {
    show();
})
const can=ref({
    name:'',
    num:'',
    pageindex:1,
    pagesize:2,
    listcount:0,
    totalpage:0,
})

const data=ref([{
"hid": 0,
      "houseNum": "",
      "houseName": "",
      "address": ""
}])

const show=()=>{
    axios.get("https://localhost:7233/api/House/GetHouseList",{params:can.value}).then(res=>{
        data.value=res.data.row;
        can.value.listcount=res.data.count;
        can.value.totalpage=Math.ceil(res.data.count/can.value.pagesize)
    })
}

const tiao=()=>{
    can.value.pageindex=1;
    show();
}

const router=useRouter();
const add=()=>{
    router.push({
        path:'/AddView'
    })
}

const del=(n:number)=>{
    if(confirm("确认删除吗？")){
        axios.delete("https://localhost:7233/api/House/DeleteHouse",{params:{id:n}}).then(res=>{
            if(res.data>0){
                alert("移除成功");
                show();
            }else{
                alert("移除失败");
            }
        })
    }
}

const upd=(sid:number)=>{
    router.push({
        path:'/UpdateView',
        query:{id:sid}
    })
}

const skip=(k:number)=>{
    if(k==1){
        can.value.pageindex=1;
        show();
    }
    if(k==2){
        if(can.value.pageindex>1){
            can.value.pageindex-=1;
            show();
        }else{
            alert("超出范围");
        }
    }
    if(k==3){
        if(can.value.pageindex<can.value.totalpage){
            can.value.pageindex+=1;
            show();
        }else{
            alert("超出范围");
        }
    }
    if(k==4){
        can.value.pageindex=can.value.totalpage;
        show();
    }
}

const page=()=>{
    if(can.value.pageindex>can.value.totalpage){
        alert("超出最大页吗，返回尾页");
        can.value.pageindex=can.value.totalpage;
        show()
    }
    if(can.value.pageindex*0!=0){
        alert("必须输入数字");
        can.value.pageindex=1;
        show();
    }
    show();
}


</script>

<style scoped>

</style>